import React, { Component } from 'react'

export default class Verification extends Component {
    constructor () {
        super();
        this.state = {
            username: {
                value: "",
                reg: /^[a-z_$][a-z_$0-9]{5,11}$/i,
                msg: "只能以数字字母_$组成并且不能以数字开头长度6到12位",
                class: "error",
            },
            userpwd: {
                value: "",
                reg: /^(?![a-zA-Z]+$)[a-z][a-z0-9]{5,11}$/i,
                msg: "必须以数字字母组成并且不能以数字开头，长度6到12位",
                class: "error",
            },
            usertel: {
                value: "",
                reg: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                msg: "号码字段不存在",
                class: "error",
            },
        };
    }
    setUser = (attr,value,errmsg) => {
        if (this.state[attr].reg.test(value)) {
            //通过
            this.setState({
                [attr]: { ...this.state[attr], value, msg: "√", class: "success" }
            });
        } else {
            this.setState({
                [attr]: { ...this.state[attr], value, msg: errmsg, class: "error" }
            })
        }
    };
   

    VerificationAll() {
        console.log(this.state.userpwd.class === "success");
        if (this.state.userpwd.class === 'success' && this.state.usertel.class === 'success' && this.state.username.class === 'success') {
            console.log('提交成功');
        }
    }
    render() {
        return (
            <div>
                <h2>表单验证</h2>
                <div>
                    用户名
                    <input
                        value={this.state.username.value}
                        onChange={(e) => {
                            this.setUser('username', e.target.value, "只能以数字字母_$组成并且不能以数字开头长度6到12位");
                        }}
                    />
                    <span className={this.state.username.class}>
                        {this.state.username.msg}
                    </span>
                </div>
                <div>
                    密码
                    <input
                        value={this.state.userpwd.value}
                        onChange={(e) => {
                            this.setUser('userpwd', e.target.value, "必须以数字字母组成并且不能以数字开头，长度6到12位");
                        }}
                    />
                    <span className={this.state.userpwd.class}>
                        {this.state.userpwd.msg}
                    </span>
                </div>
                <div>
                    电话
                    <input
                        value={this.state.usertel.value}
                        onChange={(e) => {
                            this.setUser('usertel', e.target.value, "号码字段不存在");
                        }}
                    />
                    <span className={this.state.usertel.class}>
                        {this.state.usertel.msg}
                    </span>
                </div>
                <button onClick={() => { this.VerificationAll() }}>验证</button>
            </div>
        );
    }
}